<template>
  <SimpleMindMap v-if="flag" :data="mindMapData" :mode="mode" :is-lock="isLock" :other-info="otherInfo" />
</template>

<script>
import { getInfoById, lockOperate, unlockOperate } from '@/api/deal/map/dealEstateMap'
import SimpleMindMap from '@/components/SimpleMindMap/Index.vue'
export default {
    name: 'Inddex',
    components: { SimpleMindMap },
    data() {
      return {
        codeUrl: '',
        mapId: this.$route.query.id,
        mode: this.$route.query.mode,
        mindMapData: undefined,
        userId: this.$store.state.user.userId,
        otherInfo: {
          lockUserId: undefined,
          lockUserName: undefined,
          updateTime: ''
        },
        flag: false,
        isLock: 'N',
        count: 0
      }
    },
    watch: {
    },
    created() {
      this.init()
    },
    mounted() {
      if (this.$route.query.mode !== 'readonly') {
        window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
        // window.addEventListener('unload', function() {
        //   debugger
        // })
        document.onmousemove = (event) => { // 监听鼠标
          const x1 = event.clientX
          const y1 = event.clientY
          if (this.x !== x1 || this.y !== y1) {
            this.count = 0
          }
          this.x = x1
          this.y = y1
        }
        document.onkeydown = () => { // 监听键盘
          this.count = 0
        }
        document.onscroll = () => { // 监听Scroll
          this.count = 0
        }
        this.setTimer()
      }
    },
    beforeDestroy() {
      this.clearTimer()
      window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
    },
    methods: {
       // 初始化数据
      init() {
        if (this.mapId) {
          getInfoById(this.mapId, this.mode).then(response => {
                this.mindMapData = JSON.parse(response.data.dataJson)
                this.flag = true
                if (response.data.isLock) {
                  this.isLock = response.data.isLock
                }
                this.otherInfo.lockUserId = response.data.lockUserId
                this.otherInfo.lockUserName = response.data.lockUserName
                this.otherInfo.createById = response.data.createBy.id
                this.otherInfo.updateTime = this.parseTime(response.data.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')
                // 如果是编辑设置锁定状态 并在redis存一条8小时的记录
                if (this.mode === 'edit') {
                  if (this.isLock === 'N') {
                    this.lockInfo()
                  } else if (this.isLock === 'Y') {
                    // 如果锁定的操作人不是当前操作人 则设置为只读模式
                    if (response.data.lockUserId && response.data.lockUserId === this.userId) {
                      this.isLock = 'N'
                    }
                  }
                }

                this.flag = true
                this.$forceUpdate()
            }).catch(() => {
            })
        }
      },
      lockInfo() {
        lockOperate(this.mapId).then(response => {
            console.log(response.rows)
        })
      },
      async beforeunloadHandler(event) {
        // 添加询问用户是否关闭页面的提示语句
        event.returnValue = '确定退出'
         // 关闭的时候解锁
        await unlockOperate(this.mapId)
      },
      clearTimer() {
        clearInterval(window.myTimer)
        window.myTimer = null
      },
      setTimer() {
        this.count = 0
        if (!window.myTimer) {
          window.myTimer = window.setInterval(this.cookieTimeout, 1000)
        }
      },
      async cookieTimeout() {
        // 判断用户半小时无操作就自动解锁
        const outTime = 1
        this.count++
        if (this.count === outTime * 1800) {
          // 提示并解锁
          await unlockOperate(this.mapId)
          this.$alert('您好，您已半小时未操作，已自动解锁，点击确定返回列表', '提示', {
            confirmButtonText: '确定',
            showClose: false,
            callback: action => {
              console.log(action)
              this.$router.push('/deal/map/dealEstateMapList')
            }
          })
        }
      }
    }
}
</script>

